<template>
  <div class='ant-alert ant-alert-info' style='margin-bottom: 16px;'>
    <i class='anticon anticon-info-circle ant-alert-icon'></i> 已选择 <a
    style='font-weight: 600'>{{ selectedRowKeys.length }}</a>项
    <a style='margin-left: 24px' @click='onClearSelected'>清空</a>
    <a-popover v-if="isOpenSettingColumns" title='自定义列' trigger='click' placement='leftBottom' style='float: right'>
      <template slot='content'>
        <a-checkbox-group @change='onColSettingsChange'  :defaultValue='settingColumns'>
          <a-row>
            <template v-for='(item,index) in defColumns'>
              <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
                <a-col :span='12'>
                  <a-checkbox :value='item.dataIndex'>{{ item.title }}</a-checkbox>
                </a-col>
              </template>
            </template>
          </a-row>
        </a-checkbox-group>
      </template>
      <a><a-icon type='setting' />自定义列</a>
    </a-popover>
  </div>
</template>
<script>
export default {
  name: 'TslSettingCloumns',
  props:{
    selectedRowKeys:{
      type: Array,
      required: true
    },
    settingColumns: {
      type: Array,
      required: true
    },
    defColumns: {
      type: Array,
      required: true
    },
    isOpenSettingColumns: {
      type: Boolean,
      default: true,
      required: false
    }
  },
  components: {

  },
  data() {
    return {

    }
  },
  created() {
  },
  mounted() {
  },
  computed: {

  },
  methods:{
    onClearSelected(){
      this.$emit('onClearSelected')
    },
    onColSettingsChange(checkedValues){
      this.$emit('onColSettingsChange',checkedValues)
    }
  }
}
</script>

<style scoped>

</style>